<template>
	<view class="goods">
		<!-- 导航栏 -->
		<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" :title="titleText"></nav-bars>

		<!-- 商品轮播图 -->
		<view class="g_banner">
			<view class="i_tBtn" @click="dviewr()" v-if="cool_show">
				<view class="i_tbImg"><image src="@/static/home/3d.png"></image></view>
				<view class="i_tbTxt">3D</view>
			</view>
			<swiper @change="changeBanner">
				<swiper-item v-for="(item, index) in goodsInfo.round_imgs" :key="index" @click="preview(index, goodsInfo.round_imgs)">
					<image :src="item.image_path"></image>
				</swiper-item>
			</swiper>
			<view class="SwiperDots">{{round_imgs.length == 0 ? bannerIndex : bannerIndex + 1 }}/{{round_imgs.length }}</view>
		</view>
		<view class="GoodsMessage">
			<view class="Priceview">
				<view class="GoodsPrice">
					<view class="GoodsPriceText">优惠价</view>
					<view style="line-height: 1;">
						￥
						<text class="GoodsPriceMun">{{ goodsInfo.price }}</text>
					</view>
				</view>
				<view style="color: #939393;">{{ goodsInfo.volume }}人付款</view>
			</view>

			<view @click="ShareUserApp" class="ShareView"><u-icon label="分享" name="share" color="#666666" label-size="24" size="24"></u-icon></view>
			<view class="GoodsShopPrice">市场价￥ {{ goodsInfo.primary_price }}</view>
			<view class="GoodsTitle omit-2">{{ goodsInfo.product_title }}</view>
			<view class="g_it">
				<view class="g_iGroup">
					<view class="g_iItem">
						<view class="g_iLabel">选择</view>
						<view class="g_iCont" @tap="showSizePop(goodsInfo.specs_type)">
							<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
							<view class="g_iTxt">规格分类</view>
							<template v-if="goodsInfo">
								<view class="g_iSelect" v-if="goodsInfo && goodsInfo.sku_lst">
									<view style="display: flex; overflow-x: auto; width: 50%;">
										<view style="display: flex;">
											<view
												class="g_isItem"
												v-for="(itme, index) in goodsInfo.sku_lst"
												:key="index"
												:class="JSON.stringify(itme.attribute) == JSON.stringify(keys) ? 'active' : ''"
											>
												<image :src="goodsInfo.main_imgurl"></image>
											</view>
										</view>
									</view>
									<view class="g_isLabel">共有{{ goodsInfo.sku_lst.length }}种规格分类可选</view>
								</view>
							</template>
							<template v-else>
								<view class="g_iSelect" v-if="goodsInfo && goodsInfo.sku_lst">
									<view style="display: flex; overflow-x: auto; width: 50%;">
										<view style="display: flex;">
											<view class="g_isItem" :class="JSON.stringify(goodsInfo.sku_lst[0].attribute) == JSON.stringify(this.keys) ? 'active' : ''">
												<image :src="goodsInfo.main_imgurl"></image>
											</view>
										</view>
									</view>
									<view class="g_isLabel">共有1种规格分类可选</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="g_detail">
			<view class="DividerLine"><u-divider color="#999999" bg-color="#fff" border-color="#ccc" fontSize="28">商品详情</u-divider></view>
			<view style="padding: 20rpx 0;"><u-parse :html="details"></u-parse></view>
		</view>

		<!-- 固定条 -->
		<view class="into_shopcart">
			<view class="into_shopcart_box" style="width: 100%;">
				<!-- 左边小图标 -->
				<view class="into_icon">
					<view style="display: flex;">
						<view class="icon_store" @tap="toPage('store')">
							<view class="store"><view class="iconfont iconhuaban115"></view></view>
							<text>店铺</text>
						</view>
						<!-- #ifndef MP-WEIXIN -->
						<view class="icon_service" @tap="toCustomer()">
							<view class="service"><view class="iconfont icon-comment2"></view></view>
							<text>客服</text>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="icon_service" @tap="toCustomer()" v-if="!config_id && !config_url">
							<view class="service"><view class="iconfont icon-comment2"></view></view>
							<text>客服</text>
						</view>
						<view class="icon_service" v-else @click="gitpouchatshow">
							<view class="service"><view class="iconfont icon-comment2"></view></view>
							<text>客服</text>
						</view>
						<!-- #endif -->
						<view class="icon_service" @click="focusStore">
							<view class="service">
								<view class="iconfont iconhuaban117" v-if="product_follow_status == 1"></view>
								<view class="iconfont iconhuaban161" v-else></view>
							</view>
							<text>收藏</text>
						</view>
					</view>
				</view>
				<!-- 右边按钮 -->
				<view class="into_btn">
					<view class="into_settlement" @click="buy(1)"><text>立即购买</text></view>
				</view>
			</view>
		</view>

		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model ? 'show' : '']" @click.stop="is_show_model = false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
				<view class="md-content">
					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<button open-type="share" @click="is_show_model = false" class="sharebtn"></button>
					</view>
					<view class="md-content-item" @click="sharePoster">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model = false">取消</view>
			</view>
		</view>
		<qrcode-poster
			ref="poster"
			:title="shaegood.product_title"
			:subTitle="shaegood.store_name"
			:primary_price="shaegood.primary_price"
			:headerImg="shaegood.main_imgurl"
			:price="shaegood.price"
		></qrcode-poster>
		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop">
						<view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view>
					</view>
					<view class="S_bInfo">
						<view class="S_biHead"><image :src="goodsInfo.main_imgurl" mode="aspectFit"></image></view>
						<view class="S_biCan">
							<view class="S_biFee">
								¥
								<text>{{ goodsInfo.price }}</text>
							</view>
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="S_bcGroup" v-for="(items, index1) in goodsInfo.parameter" :key="index1">
								<view class="S_bcTit">{{ items.specifs }}</view>
								<view class="S_bcChecks">
									<view
										class="S_bcCheck"
										v-for="(item, index2) in items.child"
										:key="index2"
										@click="checkedEvent(item, index1)"
										:class="{ checked: item.checked }"
									>
										{{ item.specif }}
									</view>
								</view>
							</view>
							<view class="S_bcGroup">
								<view class="S_bcTit">数量</view>
								<view class="S_bcNums">
									<view class="S_bcMinus" @tap="minusSizeCart"></view>
									<view class="S_bcNum">{{ sizeNum }}</view>
									<view class="S_bcAdd" @tap="addSizeCart"></view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="S_bBtns">
						<!-- <view class="S_bbBtn1" @click="addCart" style="width: 100%;">加入购物车</view> -->
						<view class="S_bbBtn1 S_bbBtn2" @click="buy()" style="width: 100%;">立即购买</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
		  <view class="poucont">	
			<view class="chatlist">
				<view class="chatml" @click="gitwxchat()" v-if="config_url">
					<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
					<text class="t1">在线微信客服</text>
					<text class="t2">可直接联系客服</text>
				</view>
				<view class="chatml" v-if="config_id">
					<cell class="cell-service" bind:startmessage='startmessage' bind:completemessage="completemessage" :plugid="config_id"/>
					<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
					<text class="t1">添加微信客服</text>
					<text class="t2">扫微信二维码</text>
				</view>
			</view>
			<view class="iconfont icon-close" @click="wxCodeClick"></view>
		  </view>	
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js';
import service_mall from '@/service/mall.js';
import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';

export default {
	components: {
		QrcodePoster,
		// #ifdef MP-WEIXIN
			"cell": "plugin://contactPlugin/cell",
		// #endif
	},

	data() {
		return {
			product_id: null,
			goodsInfo: {},
			bannerIndex: 0,
			// 规格
			sizePop: false,
			sizeImage: null, // 规格图片
			sizePrice: null, // 规格价格
			sizeNum: 1,
			// 购物车
			cart: null,
			child: '',
			is_show_model: false, //是否显示分享模态窗
			shaegood: '',
			sharecode: '',
			specif: '',
			html: '',
			sku_id: '',
			keys: [],
			details: '',
			userId: '',
			cool_show: '',
			product_follow_status: '',
			status: 1,
			activityRules: {},
			showServe: false,
			gid: '',
			u: '', //创业精英从用户端转发给用户标识
			ShareSkuID: '',
			isChanegPriceSku: null ,//选择的规格是否改价  1是  0不是
			round_imgs:[],//轮播图
			sku_lst:[],
			scrollTop: 0,
			titleText: '',
			config_id:'',
			config_url:'',
			pouchatshow:false,
		};
	},

	onLoad(options) {
		this.$utils.getUrl()
		let scene = decodeURIComponent(options.scene);
		let token = uni.getStorageSync('token');
		scene = scene.split('&');
		let obj = {};
		let app = getApp();
		for (let i = 0; i < scene.length; i++) {
			let newscene = scene[i].split('=');
			obj[newscene[0]] = newscene[1];
		}
		if (obj.id) {
			this.product_id = obj.id;
			this.gid = obj.gid ? obj.gid : '';
			this.u = obj.u ? obj.u : '';
			 console.log(obj,'小程序二维码参数');
			this.ShareSkuID = obj.sku_id;
		} else if (app.globalData.product_id) {
			this.product_id = app.globalData.product_id;
			this.gid = app.globalData.gid;
			this.ShareSkuID = app.globalData.sku_id ? app.globalData.sku_id : '';
			// console.log(app.globalData,"11231231");
		} else {
			this.product_id = options.id;
			this.gid = options.gid ? options.gid : '';
			this.u = options.u ? options.u : '';
			this.ShareSkuID = options.sku_id;
		}
		if (!token) {
			// uni.setStorageSync('id', this.product_id);
			// uni.setStorageSync('gid', this.gid);
			// uni.setStorageSync('u', this.u);
			// uni.setStorageSync('NewName', 'ShareProduct');
			uni.redirectTo({
				url: '/pages_login/pages/login/login/index'
			});
		}
		this.toBindUser();
		this.getData();
		this.getlog();
		if (options.share_uid) {
			let shareuId = options.share_uid;
			this.$store.commit('index/SET_shareuId', shareuId);
			if (token && shareuId) {
				service_mall
					.getPromoter({
						share_uid: shareuId
					})
					.then(res => {});
			}
		}
		if (obj.gid) {
			let shareuId = obj.gid;
			this.$store.commit('index/SET_shareuId', shareuId);
			if (token && shareuId) {
				service_mall
					.getPromoter({
						share_uid: shareuId
					})
					.then(res => {});
			}
		}
		this.userId = uni.getStorageSync('userId');
	},
	onPageScroll(e) {
		let scrollTop = e.scrollTop;
		this.scrollTop = scrollTop;
		if (e.scrollTop >= 300) {
			this.titleText = '商品详情';
		} else {
			this.titleText = '';
		}
		// 滑动距离超过用户名 => 显示导航栏
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
		}
		return {
			title: this.goodsInfo.product_title,
			path:
				'/pages_mall/pages/mall/goods_details/GoodsShareDetails?id=' +
				this.product_id +
				'&share_uid=' +
				this.userId +
				'&gid=' +
				this.gid +
				'&u=u' +
				'&sku_id=' +
				this.sku_id,
			success: function(res) {
				console.log('成功', res);
			}
		};
	},
	onShareTimeline(res) {
		if (res.from === 'menu') {
		}
		return {
			title: this.goodsInfo.product_title,
			path:
				'/pages_mall/pages/mall/goods_details/GoodsShareDetails?id=' +
				this.product_id +
				'&share_uid=' +
				this.userId +
				'&gid=' +
				this.gid +
				'&u=u' +
				'&sku_id=' +
				this.sku_id,
			success: function(res) {
				console.log('成功', res);
			}
		};
	},
	methods: {
		// 用户绑定创业精英
		toBindUser() {
			if (this.gid && this.u == 'u') {
				service_mall
					.toBindUser({
						puid: this.gid
					})
					.then(res => {
						console.log(res, '绑定结果');
						if (res.code == 1) {
						}
					});
			}
		},
		// 获取企业微信callme配置
		gitConfig() {
			service_mall.getCallMeConfig({ partner_type: 'shop', partner_id: this.goodsInfo.store_id }).then(res => {
				if (res.code == 1) {
					this.config_id = res.data.config_id;
				}
			});
		},
		gitwxConfig() {
			service_mall.getwxMeConfig({ partner_type: 'shop', partner_id: this.goodsInfo.store_id }).then(res => {
				if (res.code == 1) {
					this.config_url = res.data.url;
				}
			});
		},
		gitpouchatshow(){
			this.pouchatshow = true
		},
		wxCodeClick(){
			this.pouchatshow = false
		},
		gitwxchat(){
			wx.openCustomerServiceChat({
			  extInfo: {url: this.config_url},
			  corpId: this.$env.CORPID,
			  success(res) {}
			})
		},
		gitis_show_model() {
			this.is_show_model = true;
		},
		//分享海报
		sharePoster() {
			//获取带参数二维码并传递
			this.is_show_model = false;
			this.$refs.poster.showCanvas(this.sharecode);
		},
		ShareUserApp() {
			// is_show_model=true
			if (this.sku_id) {
				this.is_show_model = true;
				this.shareimg();
			} else {
				this.sizePop = true;
			}
		},
		shareimg() {
			var that = this;
			service_mall
				.goodsShareshare({
					product_id: that.product_id,
					uid: that.gid,
					sku_id: that.sku_id
				})
				.then(res => {
					if (res.code == 1) {
						var specsType = res.data.specs_type == 1 ? false : true;
						console.log(specsType);
						// goodsInfo.parameter
						var SkuList = res.data.sku_lst;
						// 多规格
						if (specsType) {
							SkuList.forEach((item, index) => {
								if (that.sku_id == item.sku_id) {
									console.log(item);
									res.data.price = item.price;
									that.isChanegPriceSku = item.isModifyPrice == true ? 1 : 0;
								}
								// isChanegPriceSku: null, //选择的规格是否改价  1是  0不是
							});
							that.shaegood = res.data;
							that.sharecode = res.data.wx_code_url;
						} else {
							// console.log(2);
							// console.log(SkuList);
							res.data.price = res.data.sku_lst[0].price;
							that.isChanegPriceSku = res.data.sku_lst[0].isModifyPrice == true ? 1 : 0;
							that.shaegood = res.data;
							that.sharecode = res.data.wx_code_url;
						}
					}
				});
		},
		//记录足迹
		getlog() {
			service_mall
				.getshoplog({
					product_id: this.product_id
				})
				.then(res => {});
		},
		getActivityRules(e) {
			if (e) {
				this.activityRules = JSON.parse(e);
			}
		},
		// 收藏
		focusStore() {
			let follow = this.product_follow_status;
			if (follow == 1) {
				let status = 0;
				uni.showModal({
					title: '提示',
					content: '确认取消收藏?',
					success: res => {
						if (res.confirm) {
							service_mall
								.getcollect({
									product_id: this.product_id,
									status: status
								})
								.then(res => {
									if (res.code == 1) {
										this.product_follow_status = status == 1;
									} else {
										this.$utils.showErr({
											title: res.msg
										});
									}
								});
						} else if (res.cancel) {
							return;
						}
					}
				});
			} else {
				let status = 1;
				service_mall
					.getcollect({
						product_id: this.product_id,
						status: status
					})
					.then(res => {
						if (res.code == 1) {
							this.product_follow_status = status == 1;
						} else {
							this.$utils.showErr({
								title: res.msg
							});
						}
					});
			}
		},
		// 获取商品数据
		getData() {
			var that = this;
			service_mall
				.goodsShareDetail({
					product_id: that.product_id,
					uid: that.gid
					// uid:707
				})
				.then(res => {
					if (res.code == 1) {
						// this.shareimg()
						let data = res.data;
						// 处理数据
						let goodsInfo = data;
						that.product_follow_status = res.data.product_follow_status;
						goodsInfo.volume = goodsInfo.volume ? goodsInfo.volume : 0;
						goodsInfo.specs_type = goodsInfo.specs_type == 1 ? false : true;
						// 多规格
						if (goodsInfo.specs_type) {
							goodsInfo.sku_lst.forEach((item, index) => {
								if (item.attribute == null || item.attribute.length == 0) {
									goodsInfo.sku_lst.splice(index, 1);
								}
							});
							if (that.ShareSkuID) {
								// console.log(goodsInfo);
								var list = goodsInfo.sku_lst;
								var parameter = goodsInfo.parameter;
								if (list.length > 0) {
									list.forEach((item, index) => {
										if (that.ShareSkuID == item.sku_id) {
											goodsInfo.price = item.price;
											goodsInfo.primary_price = item.primary_price;
											that.sku_id = item.sku_id;
											this.isChanegPriceSku = item.isModifyPrice == true ? 1 : 0;
											var skuValue = item.attribute;
											if (skuValue) {
												skuValue.forEach((item1, index1) => {
													parameter.forEach((item2, index2) => {
														if (item1.key == item2.specifs) {
															var dataChlid = item2.child;
															dataChlid.forEach((item3, index3) => {
																item3.checked = false;
																if (item1.value == item3.specif) {
																	item3.checked = true;
																}
															});
														}
													});
												});
											}
										}
									});
								}
							}
						}
						// 单规格
						else {
							goodsInfo.price = goodsInfo.sku_lst[0].price;
							goodsInfo.primary_price = goodsInfo.sku_lst[0].primary_price;
							goodsInfo.stockNum = goodsInfo.sku_lst[0].num;
							goodsInfo.sizeId = goodsInfo.sku_lst[0].sku_id;
							this.isChanegPriceSku = goodsInfo.sku_lst[0].isModifyPrice == true ? 1 : 0;
							this.sku_id = goodsInfo.sku_lst[0].sku_id;
						}
						this.cool_show = data.cool_show;
						this.details = data.details;
						this.goodsInfo = goodsInfo;
						this.gitConfig()
						this.gitwxConfig()
						this.round_imgs=goodsInfo.round_imgs;
						this.child = goodsInfo.parameter[0].child;
						that.get_keys();
						// console.log(this.sku_id);
					}
				})
				.catch(err => {});
		},
		//选择规格
		checkedEvent(data, index1) {
			if (data.checked) {
				this.$set(data, 'checked', false);
				this.sku_id = '';
			} else {
				this.goodsInfo.parameter[index1].child.map(item => {
					this.$set(item, 'checked', false);
				});
				this.$set(data, 'checked', true);
				this.get_keys();
			}
			// console.log(this.sku_id);
		},
		get_keys() {
			let keys = [];
			this.goodsInfo.parameter.map((item1, index1) => {
				let checkedItem = item1.child.find(r => r.checked);
				if (checkedItem) {
					keys.push({
						key: item1.specifs,
						value: checkedItem.specif
					});
				}
			});
			this.keys = keys;
			let sku_lst = [];
			if (this.goodsInfo && this.goodsInfo.sku_lst) {
				sku_lst = this.goodsInfo.sku_lst;
			}
			for (let i = 0; i < sku_lst.length; i++) {
				if (JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)) {
					// console.log(sku_lst[i]);
					this.sku_id = sku_lst[i].sku_id;
					this.isChanegPriceSku = sku_lst[i].isModifyPrice == true ? 1 : 0;
					this.goodsInfo.price = sku_lst[i].price;
					this.goodsInfo.rate_price = sku_lst[i].rate_price;
					this.goodsInfo.primary_price = sku_lst[i].primary_price;
					this.goodsInfo.stockNum = sku_lst[i].num;
				}
			}
		},
		// 立即购买
		buy(e) {
			// console.log(this.goodsInfo.stockNum)
			let token = uni.getStorageSync('token');
			if (!token) {
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index'
				});
			}
			let stockNum = 0;
			if (!this.goodsInfo.specs_type && this.goodsInfo.sku_lst.length > 0) {
				//单
				this.sku_id = this.goodsInfo.sku_lst[0].sku_id;
			}

			if (this.goodsInfo.specs_type && !this.sku_id) {
				this.sizePop = true;
				if (e != 1) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none',
						duration: 2000
					});
				}
				return;
			}
			if (this.goodsInfo.specs_type) {
				let result = this.goodsInfo.sku_lst.find(r => r.sku_id == this.sku_id);
				if (result) {
					stockNum = result.num;
				}
			} else {
				stockNum = this.goodsInfo.stockNum;
			}
			// 先判断库存是否足够
			if (stockNum < this.sizeNum) {
				uni.showToast({
					title: '库存不足',
					icon: 'none'
				});
				return;
			}

			let params = {
				origin_type: 2,
				cart_ids: '',
				goods: {
					sku_id: this.sku_id,
					pack_id: '',
					num: this.sizeNum,
					isModifyPrice: this.isChanegPriceSku, //是否为创客改价商品 1是 0不是
					modifyPriceUser:  this.gid
					// modifyPriceUser: this.isChanegPriceSku == 1 ? this.gid : 0
				}
			};
			uni.setStorage({
				key: 'local_order_list',
				data: params,
				success: () => {
					uni.navigateTo({
						url: '/pages_mall/pages/mall/order/order?sourceFrom=detail&Nocart=1'
					});
				}
			});
		},

		// 添加数量
		addSizeCart() {
			this.sizeNum++;
		},

		// 删减购物车-规格弹窗
		minusSizeCart() {
			if (this.sizeNum > 1) this.sizeNum--;
		},

		// 弹窗-规格
		showSizePop(i) {
			// console.log(i, '11')
			// console.log(this.goodsInfo, '22')
			this.sizePop = true;
		},
		// 预览图片
		preview(index, urls) {
			let img_url = [];
			for (let i = 0; i < urls.length; i++) {
				img_url.push(urls[i].image_path);
			}
			uni.previewImage({
				urls: img_url,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		hideSizePop() {
			this.sizePop = false;
		},
		cartlist() {
			let token = uni.getStorageSync('token');
			if (!token) {
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index'
				});
			} else {
				uni.navigateTo({
					url: '/pages_mall/pages/mall/cart/cart'
				});
			}
		},
		dviewr() {
			console.log(this.cool_show);
			uni.navigateTo({
				url: '/pages_3D/pages/3D/shop?coolid=' + this.cool_show
			});
		},
		// 跳转页面
		toPage(page, { store_id } = {}) {
			if (page === 'cart')
				uni.navigateTo({
					url: '/pages_mall/pages/mall/cart/cart'
				});
			else if (page === 'store')
				uni.navigateTo({
					url: '/pages_mall/pages/mall/store/store?storeId=' + this.goodsInfo.store_id
				});
		},
		// 轮播图内容变动
		changeBanner(e) {
			this.bannerIndex = e.detail.current;
		},

		// 禁止滑动
		moveHandle() {},
		toCustomer() {
			uni.showToast({
				title: '哎呀!不好意思，暂未配置客服...',
				icon: 'none',
				duration: 2000
			});
			// console.log(this.goodsInfo.store_id);
			// uni.setStorageSync('localGoodsInfo', this.goodsInfo);
			// uni.navigateTo({
			// 	url: '/pages_customer/pages/index?partner_type=shop&partner_id=' + this.goodsInfo.store_id
			// });
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f1f1f1;
}

.goods {
	.SwiperDots {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 16rpx;
		right: 32rpx;
		border-radius: 30rpx;
		background: rgba(0, 0, 0, 0.5);
		padding: 12rpx 24rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #fefefe;
		text-align: center;
	}

	// 商品轮播图
	.g_banner {
		height: 680rpx;
		background: #fff;
		position: relative;

		.g_bDots {
			width: 100%;
			position: absolute;
			bottom: 20rpx;
			left: 0;
			display: flex;
			justify-content: center;
		}

		.g_bDot {
			padding: 16rpx 8rpx;

			&.active .g_bIcon {
				width: 22rpx;
				border-radius: 10rpx;
				background: #16181c;
			}
		}

		.g_bIcon {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background: rgba(26, 28, 32, 0.4);
		}
	}

	// 商品基础信息
	.g_base {
		background: #fff;
		overflow: hidden;

		.g_bSell {
			height: 40rpx;
			line-height: 40rpx;
			color: #939393;
			margin: 38rpx 36rpx 0 0;
			float: right;
		}

		.g_bPrice {
			height: 66rpx;
			line-height: 66rpx;
			color: #ef5854;
			font-size: 32rpx;
			font-weight: bold;
			padding: 24rpx 0 0 32rpx;
			box-sizing: content-box;

			& > text {
				font-size: 48rpx;
			}
		}

		.g_bShare {
			width: 124rpx;
			padding: 12rpx 0 16rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			float: right;

			.g_bsIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.g_bsTxt {
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				font-size: 24rpx;
				margin-top: 6rpx;
			}
		}

		.g_bName {
			min-height: 88rpx;
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin: 16rpx 16rpx 16rpx 34rpx;
			box-sizing: content-box;
			display: flex;
			align-items: center;
		}
	}

	// 其他
	.g_it {
		.g_iGroup {
			margin-top: 16rpx;
			background: #fff;
		}

		.g_iItem {
			min-height: 90rpx;

			&:last-child .g_iCont::after {
				content: none;
			}
		}

		.g_iLabel {
			min-width: 126rpx;
			height: 90rpx;
			line-height: 90rpx;
			// padding: 0 12rpx 0 32rpx;
			float: left;
		}

		.g_iCont {
			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				width: 100%;
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(0.5);
			}
		}

		.g_iIcon {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 28rpx;
			right: 36rpx;
		}

		.g_iTxt {
			height: 90rpx;
			line-height: 90rpx;
			color: #666;
		}

		.g_iSelect {
			padding-bottom: 24rpx;
			display: flex;

			.g_isItem {
				width: 60rpx;
				height: 60rpx;
				margin-right: 16rpx;
				border-radius: 8rpx;
				background: #f6f7fb;
				overflow: hidden;
			}

			.g_isItem.active {
				border: 1px #dd524d solid;
			}

			.g_isLabel {
				width: 284rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #939393;
				font-size: 22rpx;
				border-radius: 8rpx;
				background: #f6f7fb;
			}
		}
	}

	// 商品详情
	.g_detail {
		padding: 10rpx 36rpx 142rpx 32rpx;
		// margin-top: 16rpx;
		background: #fff;

		.g_dTitle {
			height: 44rpx;
			line-height: 44rpx;
			color: #000;
			font-size: 32rpx;
		}

		.g_dBox {
			margin-top: 24rpx;
			border: 1px solid rgba(0, 0, 0, 0.08);
		}

		.g_dItem {
			height: 84rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			display: flex;

			&:last-child {
				border: none;
			}
		}

		.g_dGroup {
			width: 50%;
			display: flex;
			align-items: center;
		}

		.g_dLabel {
			min-width: 146rpx;
			height: 84rpx;
			line-height: 84rpx;
			color: #000;
			font-size: 24rpx;
			padding: 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.g_dVal {
			max-height: 68rpx;
			line-height: 34rpx;
			color: #787878;
			font-size: 24rpx;
		}
	}

	// 底部操作栏
	.g_btm {
		.g_bShim {
			height: 100rpx;
			box-sizing: content-box;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_bCan {
			width: 100vw;
			height: 100rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: content-box;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_bRight {
			height: 100%;
			padding-right: 22rpx;
			float: right;
			display: flex;
			align-items: center;
		}

		.g_brAdd,
		.g_brBuy {
			width: 226rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: #fff;
			font-weight: bold;
			border-radius: 10rpx 0 0 10rpx;
			background: #c3ab7c;
		}

		.g_brBuy {
			width: 204rpx;
			border-radius: 0 10rpx 10rpx 0;
			background: #333;
			background: #ccc;
		}

		.g_bLeft {
			height: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.g_blItem {
			width: 88rpx;
		}

		.g_blIcon {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 40rpx;
			margin: 0 auto;
		}

		.g_blTxt {
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			font-size: 22rpx;
		}
	}

	// 弹窗-分享
	.g_share {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;

		.g_sBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
		}

		.g_sBox {
			width: 100%;
			height: 338rpx;
			border-radius: 16rpx 16rpx 0 0;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_sPoster {
			position: absolute;
			bottom: 420rpx;
			left: 56rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_spCan {
			width: 640rpx;
			height: 888rpx;
			border-radius: 16rpx;
			background: #fff;
			box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.16);
		}
	}
}

// 弹窗-规格
.Size {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;

	.S_bg {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
	}

	.S_box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-flow: column;
	}

	.S_bCloak {
		height: 176rpx;
	}

	.S_bContain {
		border-radius: 24rpx 24rpx 0 0;
		background: #fff;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	.S_bClose {
		width: 104rpx;
		height: 120rpx;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.S_bcIcon {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #000;
			font-size: 20rpx;
			border-radius: 50%;
			background: #f9f6f3;
		}
	}

	.S_bInfo {
		padding: 36rpx 32rpx 20rpx;

		.S_biHead {
			width: 178rpx;
			height: 178rpx;
			margin-right: 24rpx;
			border-radius: 10rpx;
			background: #f0f0f0;
			box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, 0.16);
			overflow: hidden;
			float: left;
		}

		.S_biCan {
			overflow: hidden;
		}

		.S_biFee {
			height: 60rpx;
			line-height: 60rpx;
			color: #e9423e;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 32rpx;

			& > text {
				font-size: 44rpx;
			}
		}

		.S_biTip {
			height: 40rpx;
			line-height: 40rpx;
			color: #e9423e;
			font-size: 20rpx;
			margin-top: 10rpx;
			border-radius: 4rpx;
			background: #feeff2;
			display: inline-block;

			.yprice {
				margin-left: 0;
			}
		}

		.S_biRemark {
			height: 28rpx;
			line-height: 28rpx;
			color: #939393;
			font-size: 20rpx;
			margin-top: 10rpx;
		}
	}

	.S_bConfig {
		overflow: hidden;
		flex: 1;

		.S_bcCan {
			padding: 0 34rpx 146rpx;
		}

		.S_bcGroup {
			padding-top: 40rpx;
			position: relative;

			&:first-child {
				padding-top: 20rpx;
			}
		}

		.S_bcTit {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.S_bcChecks {
			padding-top: 8rpx;
		}

		.S_bcCheck {
			height: 42rpx;
			line-height: 42rpx;
			color: #939393;
			font-size: 24rpx;
			padding: 0 26rpx;
			margin: 16rpx 16rpx 0 0;
			border-radius: 22rpx;
			background: #f5f5f5;
			display: inline-block;

			&.checked {
				color: #e9423e;
				background: #feeff2;
			}
		}

		.S_bcNums {
			height: 48rpx;
			position: absolute;
			top: 36rpx;
			right: -22rpx;
			display: flex;
		}

		.S_bcNum {
			width: 72rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			border-radius: 8rpx;
			background: #f6f7fb;
		}

		.S_bcMinus,
		.S_bcAdd {
			width: 72rpx;
			height: 48rpx;
			position: relative;
		}

		.S_bcMinus::before,
		.S_bcAdd::before,
		.S_bcAdd::after {
			content: '';
			width: 24rpx;
			height: 4rpx;
			border-radius: 4rpx;
			background: #333;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.S_bcAdd::after {
			width: 4rpx;
			height: 24rpx;
		}
	}

	.S_bBtns {
		height: 86rpx;
		color: #fff;
		font-weight: bold;
		padding: 20rpx 15rpx 0;
		border-top: 1px solid #f8f6f3;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: content-box;
		display: flex;
		justify-content: space-between;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.S_bbBtn1,
		.S_bbBtn2 {
			width: 294rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 8rpx;
			background: #c3ab7c;
			margin: 0 15rpx;

			&:active {
				opacity: 0.88;
			}
		}

		.S_bbBtn2 {
			background: #333;
		}
	}
}

// 固定条
.into_shopcart {
	width: 100%;
	height: 100rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 301;
	background-color: #fff;
	display: flex;
	align-items: center;

	&_box {
		padding: 14rpx 22rpx;
		display: flex;

		// 左边小图标
		.into_icon {
			flex: 1;
			position: relative;

			.icon_store {
				flex: 1;
				text-align: center;

				.store {
					width: 100%;
					font-size: 36rpx;

					image {
						display: block;
						margin: auto;
						width: 32rpx;
						height: 32rpx;
					}
				}

				text {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: #333333;
					margin-top: 6rpx;
				}
			}

			.icon_service {
				flex: 1;
				text-align: center;
				position: relative;
                 .cell-service{
                 	position: absolute;
                 	right: 0;
                 	bottom: 0;
                 	left: 0;
                 	top: 0;
                 	opacity: 0;
					z-index: 10;
					.cell--bubble{
						width: 100%;
					}
                 }
				.service {
					width: 100%;
					font-size: 36rpx;

					.iconhuaban117 {
						color: #fa3534;
					}

					image {
						display: block;
						margin: auto;
						width: 32rpx;
						height: 32rpx;
					}
				}

				text {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: #333333;
					margin-top: 6rpx;
				}
			}

			.contact_btn {
				width: 44rpx;
				height: 74rpx;
				margin-left: 46rpx;
			}

			button[plain] {
				border: 0 none;
			}
		}

		// 右边按钮
		.into_btn {
			height: 72rpx;
			border-radius: 10rpx;
			margin-left: 40rpx;
			display: flex;

			.join {
				width: 430rpx;
				background: #ccc;
				text-align: center;
				color: #fff;
				line-height: 72rpx;
				border-radius: 10rpx;
			}

			.join_cart {
				width: 226rpx;
				height: 100%;
				text-align: center;
				line-height: 72rpx;
				background-color: #c3ab7c;
				border-radius: 10rpx 0rpx 0rpx 10rpx;

				text {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #ffffff;
				}
			}

			.into_settlement {
				// width: 204rpx;
				width: 408rpx;
				height: 100%;
				text-align: center;
				line-height: 72rpx;
				background-color: #333;
				// border-radius: 0rpx 10rpx 10rpx 0rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				text {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #ffffff;
				}
			}
		}
	}
}

.yprice {
	margin-left: 30rpx;
	border: 1px #e9423e solid;
	display: inline-block;
	font-size: 18rpx;
	line-height: 32rpx;
	padding-right: 10rpx;

	i {
		display: inline-block;
		background: #e9423e;
		color: #fff;
		font-weight: normal;
		font-size: 20rpx;
		line-height: 36rpx;
		padding: 0 10rpx;
		margin-right: 5rpx;
	}

	text {
		font-size: 28rpx;
	}
}

.ledtprei {
	float: left;

	text {
		font-size: 40rpx;
	}
}

.cu-modal {
	position: fixed;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	display: none;
	width: 100%;
	z-index: 500;
}

.show {
	display: block;
}

.bottom-md {
	position: absolute;
	bottom: 0;
	background: #fff;
}

.share {
	position: fixed;
	color: #ffffff;
	right: 0;
	bottom: 190rpx;
	background: linear-gradient(to bottom right, #fe726b, #fe956b);
	padding: 10rpx 10rpx 10rpx 20rpx;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	box-shadow: 0 0 20upx rgba(0, 0, 0, 0.09);
}

.cancel {
	width: 100vw;
	padding: 30rpx;
	text-align: center;
	background: #ffffff;
	color: #888;
	font-weight: normal;
	font-size: 30rpx;
}

.md-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 50rpx 0;
}

.md-content-item {
	margin: 0 90rpx;
	position: relative;
}

.md-content-item image {
	width: 100rpx;
	height: 100rpx;
	margin: auto;
}

.md-content-item view {
	margin-top: 15rpx;
	font-size: 28rpx;
}

.sharebtn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}

.md-content-item .s_bIcon {
	font-size: 72rpx;
}

.s_bIcon {
	width: 112rpx;
	height: 112rpx;
	color: #fff;
	font-size: 140rpx;
	margin: 60rpx auto 0;
	border-radius: 50%;
	background: #8bc37a;
	box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
	display: flex;
	justify-content: center;
	align-items: center;
}

.s_bIcons {
	background: #ffd425;
}

.i_tBtn {
	width: 102rpx;
	height: 102rpx;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.i_tbImg {
	width: 42rpx;
	height: 42rpx;
	margin: 20rpx auto 0;
}

.i_tbTxt {
	width: 100%;
	height: 34rpx;
	line-height: 34rpx;
	text-align: center;
	color: #fff;
	font-size: 24rpx;
	position: absolute;
	top: 58rpx;
	left: 0;
}

.GoodsMessage {
	background: #fff;
	margin: 32rpx;
	box-shadow: 0rpx 2rpx 14rpx 0rpx #f1f1f1;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 32rpx 20rpx 32rpx 20rpx;
	position: relative;

	.GoodsFX {
		font-size: 28rpx;
		font-weight: 500;
		color: #f66036;
		margin-bottom: 18rpx;
	}

	.ShareView {
		position: absolute;
		right: 0;
		top: 96rpx;
		background: #f1f1f1;
		border-radius: 25rpx 0rpx 0rpx 25rpx;
		padding: 10rpx 18rpx;
	}

	.Priceview {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		margin-bottom: 28rpx;

		.GoodsPrice {
			font-size: 24rpx;
			font-weight: bold;
			color: #f66036;
			display: flex;
			align-items: flex-end;

			.GoodsPriceText {
				margin-right: 10rpx;
			}

			.GoodsPriceMun {
				font-size: 44rpx;
				font-weight: 800;
				color: #f66036;
			}
		}

		.SalePrice {
			display: flex;
			align-items: center;
			padding: 10rpx 21rpx;
			border-radius: 254px;
			background: #c3ab7c;
			width: max-content;
			margin-left: 10rpx;

			.SaleText {
				font-size: 22rpx;
				font-weight: 500;
				color: #ffffff;
				margin-right: 10rpx;
			}

			.SaleMun {
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;

				.SaleMunText {
					font-size: 36rpx;
					font-weight: 800;
					color: #ffffff;
					margin-left: 4rpx;
				}
			}
		}
	}

	.GoodsShopPrice {
		font-size: 28rpx;
		font-weight: 500;
		text-decoration: line-through;
		color: #666666;
		margin-bottom: 39rpx;
	}

	.GoodsTitle {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		text-align: justify;
		// margin-bottom: 50rpx;
	}
}

.DividerLine {
	margin: 50rpx 0 20rpx 0;
}
// 客服弹框
		.pouchat{
			position: fixed;
			background: rgba(0,0,0,0.5);
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			.poucont{
				position: absolute;
				top:30%;
				left: 15%;
				right: 15%;
				.icon-close{
					width: 80rpx;
					height: 80rpx;
					font-size: 70rpx;
					color: #fff;
					line-height: 80rpx;
					text-align: center;
					margin: 30rpx auto;
				}
			}
			.chatlist{
				background: #fff;
				padding:30rpx;
				border-radius: 10rpx;
			}
			.chatml{
				position: relative;
				padding: 20rpx;
				padding-left: 100rpx;
				min-height: 100rpx;
				.cell-service{
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					top: 0;
					opacity: 0;
					z-index: 10;
					.cell--bubble{
						width: 100%;
					}
				}
				text{
					display: block;
					line-height: 40rpx;
				}
				.t1{
					font-size: 32rpx;
				}
				.t2{
					font-size: 24rpx;
					color: #999;
				}
				image{
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					left: 15rpx;
					top:25rpx;
				}
			}
		}
</style>
